import { createRouter, createWebHistory } from 'vue-router'
//import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Footer from '../views/Footer'

//路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    //component: HomeView
    components:{
      default:HomeView,
      Footer//加载底部组件
    }
  },
  // {
  //   //path: '/users/:id',//动态路由
  //   //path: '/users/:id([0-9]+)',//路由匹配规则
  //   //path: '/users/:id(\\d+)',//路由匹配规则  //users/4==》可以  //usrs/5/6==>不可以
  //   path: '/users/:id(\\d+)+',//路由匹配规则  //usrs/5/6==>可以
  //   name: 'users',
  //   component: import( '../views/User.vue'),
  //   children:[ //嵌套路由
  //     {
  //       path:'profile',//==>user/id:/profile
  //       component: import( '../views/user/Profile.vue'),
  //     },
  //     {
  //       path:'posts',
  //       component: import( '../views/user/Posts.vue'),
  //     }
  //   ],
  //   props:true,//往组件里传递参数
  // },
  { //往组件里传递参数

    path: '/users/:id',
    name: 'users',
    props:{
      default:true,//将id传递给default ==>User.vue组件
      Footer:{    //将data  传递给Footer组件
        data:"数据"
      }
    },
    components: {
      default:() => import( '../views/User.vue'),
      Footer
    },
    children:[ //嵌套路由
      {
        path:'profile',//==>user/id:/profile
        component: import( '../views/user/Profile.vue'),
      },
      {
        path:'posts',
        component: import( '../views/user/Posts.vue'),
      }
    ],
    //props:true,//往组件里传递参数

  },
  {
    //path: '/about/:params+',//params一个或多个  //about/a/b/c
    path: '/about/:param*',//params0个或多个  //about/a/b/c
    name: 'about',

    //component: () => import( '../views/AboutView.vue')
    components:{
      default:() => import( '../views/AboutView.vue'),
      Footer//加载底部组件
    },
    alias:'/guanyu',//路由别名
  },
  {

    path: '/list',
    name: 'List',

    //component: () => import( '../views/List.vue')
    components:{
      default:() => import( '../views/List.vue'),
      Footer//加载底部组件
    }
  },
  {  //跳转式路由
    path:'/a',
    //redirect:'/',
    // redirect:{
    //   name:'List'
    // }
    redirect:(to)=>{
      if (true){
        //return '/list'
        console.log(to);
        return {
          name:"List"
        }
      }
    }
  },
  {

    path: '/:all*',//?0个或1个  *0个或多个  +1个或多个
    name: 'Error',

    component: () => import( '../views/Error.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  //history: createWebHashHistory(),
  routes:routes
})

export default router
